<template>
  <div class="list-container">
    <h2>{{ title }}</h2>
    <hr>
    <ul>
      <li v-for="(item, index) in items" :key="index" class="list-item">
        <div class="icon">{{ item.icon }}</div>
        <div class="content">
          <p><a :href="item.link">{{ item.title }}</a></p>
          <p>{{ item.description }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '学车流程'
    },
    items: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.list-container {
  position: absolute;
  top: 22px; /* 调整上下边距 */
  left: 350px;
  width: 240px; /* 固定宽度 */
  height: calc(100% - 88px); /* 固定高度并减去上下边距 */
  padding: 20px;
  background: rgba(255, 255, 255, 0.8); /* 背景透明度80% */
  border-radius: 8px; /* 添加圆角 */
}

.list-container h2 {
  text-align: center;
  font: 100;
  margin-top: 0px;
  margin-bottom: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon {
  width: 24px; /* 调整图标大小 */
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.content {
  flex: 1;
}

.content p {
  margin: 0;
}

.content p a {
  font-weight: bold;
  color: #007aff; /* 修改链接颜色 */
  text-decoration: none;
}

.content p a:hover {
  text-decoration: underline; /* 添加链接悬停效果 */
}
</style>
